<template>
  <div class="search">
    <div class="container">
      <div class="title">运费详情</div>
      <div class="title-price">
        <div class="left">
          <div class="icon" />
          <div class="text" v-text="freightData.sellerName"> 仪器仪表专卖</div>
        </div>
        <div class="right">
          <span class="right-price">单价（元）</span>
          <span class="right-num">数量</span>
        </div>
      </div>
      <div class="goods-list">
        <ul class="list-style" v-for="(item, i) in freightData.productList.spuList" :key="i">
          <li class="list-detail">
            <div class="list-left">
              <img class="left-img" :src="item.mainImg" />
              <div class="left-detail">
                <div class="left-title" v-text="item.spuName">钢管</div>
                <div class="parameter" v-for="(it, j) in item.property" :key="j">
                  <span v-text="it.name + '：' + it.value">标号:外16内6.03</span>
                </div>
                <!--<div class="parameter">标号:<span>外16内6.03</span></div>
                <div class="parameter">标号:<span>外16内6.03</span></div>-->
              </div>
            </div>
            <div class="list-right">
              <span v-text="item.price.toFixed(2) + '/' + item.unit">58</span>
              <span class="right-num" v-text="item.buyNum">1</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="close">
        <div class="close-top">
          <span v-text="'运输里程：' + freightData.productList.distance.toFixed(1) + 'km'">运输里程：200.00km，</span>
          <span v-text="'商品总重量：' + freightData.productList.totalWeight.toFixed(2) + 'kg'">商品总重量：200.00kg，</span>
          <span v-text="'商品总体积：' + freightData.productList.totalVolue.toFixed(4) + 'm³'">商品总体积：1.56m³</span>
        </div>
        <div class="close-button">商品总运费：<span v-text="'￥' + freightData.productList.totalFee.toFixed(2)">￥110.00</span></div>
      </div>
    </div>
  </div>

</template>

<script>
import { FreightData } from '@/js/constant'
export default {
  components: {
  },
  data() {
    return {
      input: '',
      num1: 1,
      freightData: JSON.parse(sessionStorage.getItem(FreightData))
    }
  },
  beforeDestroy() {
    sessionStorage.removeItem(FreightData)
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<style lang='scss' scoped >
.search{
    background: #F5F5F5;
    .container{
        .title{
            color: #3D3D3D;
            font-size: 16px;
            font-weight: bold;
            margin: 29px 0;
        }
        .title-price{
            height: 44px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left:20px;
            padding-right: 58px;
            background: #ffffff;
            margin-bottom: 20px;
            .left{
                display: flex;
                align-items: center;
                .icon{
                    width: 15px;
                    height: 15px;
                    background: darkcyan;
                    margin-right: 6px;
                }
            }
            .right{
                .right-num{
                    margin-left: 170px;
                }
            }
        }
        .goods-list{
            .list-style{
                background: #F5F5F5;
                margin-bottom: 20px;
                .list-detail{
                    padding: 20px 68px 0 20px;
                    background: #ffffff;
                    display: flex;
                    justify-content: space-between;
                    .list-left{
                        display: flex;
                        .left-img{
                            width: 82px;
                            height: 82px;
                            background: greenyellow;
                            margin-right: 30px;
                        }
                        .left-detail{
                            line-height: 20px;
                            .left-title{
                                color: #3D3D3D;
                                font-size: 14px;
                            }
                            .parameter{
                                color: #A7A7AA;
                                font-size: 12px;
                            }
                        }
                    }
                    .list-right{
                        display: flex;
                        align-items: center;
                        .right-num{
                            margin-left: 210px;
                        }
                    }
                }
                .list-detail:last-child{
                    padding-bottom: 20px;
                }
            }
        }
        .close{
            height: 87px;
            background: #ffffff;
            margin-bottom: 59px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-evenly;
            padding-right: 20px;
            .close-button{
                span{
                    color: #E03523;
                }
            }
        }
    }
}

</style>
